<template>
  <div id="left-sidebar">
    <div class="container">
      <!-- <div class="avatar">
        <img src="../assets/avatar.jpg" alt="" />
      </div> -->
      <div class="sidebar-nav">
        <div
          v-for="(item, index) in navList"
          @click="handleNavClick(item, index)"
          :class="index === currentIndex ? 'sidebar-nav-item active' : 'sidebar-nav-item'"
          :key="item.name"
        >
          <i :class="item.icon"></i>
        </div>
      </div>
      <div class="sidebar-setting">
        <a @click="handleOpenSetting" class="sidebar-setting-item">
          <i class="ri-settings-line"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const currentIndex = ref(0)

const router = useRouter()

const navList = [
  {
    icon: 'ri-task-line',
    name: 'Todo',
    path: '/todo'
  },
  {
    icon: 'ri-magic-fill',
    name: 'Habit',
    path: '/habit'
  }
]

const handleNavClick = (item, index) => {
  currentIndex.value = index
  router.push(item.path)
}

const handleOpenSetting = () => {
  window.api.openSetting()
}
</script>

<style scoped lang="scss">
#left-sidebar {
  width: 60px;
  height: 100%;
  background-color: var(--xz-secondbg);
  border-right: 1px solid var(--xz-card-border);

  .container {
    display: flex;
    flex-direction: column;
    padding: 30px 10px 10px 10px;
    height: 100%;

    .avatar {
      width: 40px;
      height: 40px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;

      .sidebar-nav-item {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 20px;

        &.active {
          i {
            color: #425aef;
          }
        }

        i {
          font-size: 1.5rem;
        }
      }
    }

    .sidebar-setting {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: auto;
      height: fit-content;
      padding-bottom: 20px;

      .sidebar-setting-item {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 20px;

        i {
          font-size: 1.5rem;
        }
      }
    }
  }
}
</style>
